<template>
    <view>
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar title="支付结果" safeAreaInsetTop fixed placeholder>
            <view class="coreshop-navbar-left-slot" slot="left">
                <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <u-icon name="home" size="22" @click="goHome"></u-icon>
            </view>
            <view slot="right">
            </view>
        </u-navbar>

        <view v-if="status && paymentInfo.status === 2">
            <!--状态图标-->
            <view class="coreshop-flex coreshop-flex-wrap coreshop-flex-direction-row coreshop-align-center coreshop-justify-center coreshop-padding-40">
                <u-icon name="checkmark-circle-fill" color="#5ac725" size="90"></u-icon>
            </view>
            <view class="coreshop-text-bold coreshop-text-black coreshop-font-xl coreshop-text-center">支付成功</view>
            <!--支付金额-->
            <view class="coreshop-text-bold coreshop-text-black coreshop-font-20 coreshop-text-center chsop-pay-result-price">￥{{ paymentInfo.money || '' }}</view>
            <!--状态说明-->
            <view class="coreshop-text-gray coreshop-font-sm coreshop-text-center coreshop-padding"> 平台已收到您的钱款，已通知卖家发货。平台会及时通知您的交易状态，请您关注。 </view>
            <!--按钮-->
            <view class="coreshop-btn-view coreshop-padding">
                <u-button type="success" size="normal" @click="orderDetail()">查看详情</u-button>
            </view>
        </view>

        <view v-else-if="status && paymentInfo.status === 1">
            <!--状态图标-->
            <view class="coreshop-flex coreshop-flex-wrap coreshop-flex-direction-row coreshop-align-center coreshop-justify-center coreshop-padding-40">
                <u-icon name="error-circle-fill" color="#fa5151" size="90"></u-icon>
            </view>
            <view class="coreshop-text-bold coreshop-text-black coreshop-font-xl coreshop-text-center">支付失败</view>
            <!--支付金额-->
            <!--<view class="coreshop-text-bold coreshop-text-black coreshop-font-30 coreshop-text-center chsop-pay-result-price">￥{{ paymentInfo.money || '' }}</view>-->
            <!--状态说明-->
            <view class="coreshop-text-gray coreshop-font-sm coreshop-text-center coreshop-padding"> 因为某些问题导致支付失败，请查看详情了解具体问题 </view>
            <!--按钮-->
            <view class="coreshop-btn-view coreshop-padding">
                <u-button type="success" size="normal" @click="orderDetail()">查看详情</u-button>
            </view>
        </view>

        <!-- 登录提示 -->
        <coreshop-login-modal></coreshop-login-modal>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                paymentId: 0,
                paymentInfo: {}, // 支付单详情
                orderId: 0,
                status: false
            };
        },
        onLoad(options) {
            if (options.id) {
                this.paymentId = options.id;
            }
            if (options.orderId) {
                this.orderId = options.orderId;
            }
            this.doGetData();
        },
        methods: {
            doGetData() {
                const _this = this;
                let time = '', i = 0;
                uni.showLoading({
                    title: '获取支付结果中',
                    mask: true
                });
                // 3秒轮询一次，最多5次，防止微信回调及接口业务处理与支付结果实际不一致
                time = setInterval(function () {
                    i++;
                    if (i == 5 || _this.paymentInfo.status == 2) {
                        clearInterval(time);
                        setTimeout(function () {
                            uni.hideLoading();
                        }, 500);
                        return;
                    }
                    _this.getPaymentInfo();
                }, 3000);

            },
            getPaymentInfo() {
                if (!this.paymentId) {
                    this.status = true;
                    this.paymentInfo.money = '0.00';
                    this.paymentInfo.status = 2;
                    this.paymentInfo.type = 1;
                    uni.hideLoading();
                    return;
                }
                let data = {
                    id: this.paymentId
                };
                this.$u.api.paymentInfo(data).then(res => {
                    if (res.status) {
                        let info = res.data;
                        if (info.paymentCode === 'alipay') {
                            info.paymentCodeName = '支付宝支付';
                        } else if (info.paymentCode === 'wechatpay') {
                            info.paymentCodeName = '微信支付';
                        } else if (info.paymentCode === 'balancepay') {
                            info.paymentCodeName = '余额支付';
                        }
                        this.orderId = info.sourceId;
                        this.status = true;
                        this.paymentInfo = info;
                    } else {
                        this.$u.toast(res.msg);
                    }
                });
            },
            orderDetail() {
                if (this.orderId && (this.paymentInfo.type == this.$globalConstVars.paymentType.common || this.paymentInfo.type == this.$globalConstVars.paymentType.pinTuan || this.paymentInfo.type == this.$globalConstVars.paymentType.group || this.paymentInfo.type == this.$globalConstVars.paymentType.seckill || this.paymentInfo.type == this.$globalConstVars.paymentType.bargain || this.paymentInfo.type == this.$globalConstVars.paymentType.giveaway || this.paymentInfo.type == this.$globalConstVars.paymentType.solitaire || this.paymentInfo.type == this.$globalConstVars.paymentType.transactionComponent)) {
                    this.$u.route({ type: 'redirectTo', url: '/pages/member/order/detail/detail?orderId=' + this.orderId });
                } else if (this.paymentInfo.type === this.$globalConstVars.paymentType.recharge) {
                    this.$u.route({ type: 'redirectTo', url: '/pages/member/balance/details/details' });
                } else if (this.paymentInfo.type === this.$globalConstVars.paymentType.formPay || this.paymentInfo.type === this.$globalConstVars.paymentType.formOrder) {
                    this.$u.route({ type: 'switchTab', url: '/pages/index/default/default' });
                } else if (this.paymentInfo.type === this.$globalConstVars.paymentType.serviceOrder) {
                    this.$u.route({ type: 'redirectTo', url: '/pages/member/serviceOrder/index/index' });
                }
            }
        }
    };
</script>

<style lang="scss">
    @import 'result.scss';
</style>